<nz-spin [nzSpinning]="service.http.loading">
  <div *ngIf="i">
    <page-header-wrapper [title]="'整车货源详情'" [logo]="logo">
      <ng-template #logo>
        <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
          <i nz-icon nzType="left" nzTheme="outline"></i>
        </button>
      </ng-template>
    </page-header-wrapper>
    <nz-card [nzBorderless]="true" class="mb0">
      <div class="mb-sm common-order-header" nz-row>
        <div>
          <button nz-button nzType="primary" nzSize="small" nzDanger>{{ i?.resourceStatusLabel }}</button>
          <b class="ml-md text-md">货源编码 : {{ i?.resourceCode }}</b>
        </div>
        <div>
          <button nz-button (click)="cancleGoodsSource()" *ngIf="i?.resourceStatus === '1'" acl
            [acl-ability]="['SUPPLY-VEHICLE-DETAIL-cancelSupply']">取消货源</button>
          <button nz-button (click)="assignedCar(i)" *ngIf="i?.resourceStatus === '1' && i?.serviceType === '2'" acl
            [acl-ability]="['SUPPLY-VEHICLE-DETAIL-vehicleAnew']">重新指派</button>
          <button nz-button (click)="updateGoodsSource(i)"
            *ngIf="i?.resourceStatus === '1' && i.insurancePayment !== 'Y'" acl
            [acl-ability]="['SUPPLY-VEHICLE-DETAIL-changeSupply']">修改货源</button>
          <button nz-button nzType="primary" nzGhost (click)="nextOrder(i)" acl
            [acl-ability]="['SUPPLY-VEHICLE-DETAIL-vehiclePlaceOrder']">再下一单</button>
        </div>
      </div>
      <!-- <div class="mt0 mb0" nz-row>
        <div>
          <b>总费用：<span class="text-red-light text-md">{{ i?.totalAmount | currency }}</span></b>
        </div>
      </div> -->
      <nz-divider class="divider-margin"></nz-divider>
      <div class="mb-lg" sv-container>
        <sv label="网络货运人">{{ i?.enterpriseInfoName }} </sv>
        <sv label="外部货源号">{{ i?.externalResourceCode }} </sv>
        <sv label="项目">{{ i?.enterpriseProjectName }}</sv>
        <sv label="录单员">{{ i?.createUserName }}/{{ i?.createUserPhone }}</sv>
        <sv label="调度员">{{ i?.dispatchName }}/{{ i?.dispatchPhone }} </sv>
        <sv label="服务类型">{{ i?.serviceTypeLabel }} </sv>
      </div>
      <div class="approval-status">
        <div lass="step-row">
          <nz-steps [nzLabelPlacement]="'vertical'">
            <nz-step [nzStatus]="i?.resourceStatus !== '1' ? 'finish' : 'process'" nzIcon="solution"
              [nzDescription]="i?.createAt" nzTitle="下单" [nzSubtitle]="i?.createTime"></nz-step>
            <nz-step *ngIf="i?.resourceStatus === '1' || i?.resourceStatus === '2'"
              [nzStatus]="i?.resourceStatus === '1' ? 'wait' : 'finish'" nzIcon="file-done" [nzTitle]="'接单'"
              [nzSubtitle]="i?.orderReceivingTime"></nz-step>
            <nz-step nzStatus="finish" nzIcon="close-circle" nzTitle="取消货源" *ngIf="i?.resourceStatus === '3'"
              [nzSubtitle]="i?.endTime"></nz-step>
          </nz-steps>
        </div>
      </div>

      <div class="mt-md">
        <!-- <h4 class="text-md">装货卸货信息
          <span class="ml-sm text-sm">(
            <label>{{ i?.loadingCount }}装</label>
            <label>{{ i?.unloadingCount }}卸</label>
            )
          </span>
        </h4> -->
        <div class="font-weight-blod text-md detail-title">
          <a class="sign mr-xs"></a>
          <span>装货卸货信息</span>
          <span class="ml-sm text-sm">(
            <label>{{ i?.loadingCount }}装</label>
            <label>{{ i?.unloadingCount }}卸</label>
            )
          </span>
        </div>
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="12">
            <div class="handling-info p-md">
              <ng-container *ngFor="let item of i?.unLoadingPlaceVOList">
                <div class="flex" *ngIf="item?.type === '1'">
                  <div class="loading-row">
                    <div class="handling-info-icon loading-bg">装</div>
                    <div class="info">
                      <h4>装货地：{{ item?.province }}{{ item?.city }}{{ item?.area }}{{ item?.detailedAddress }}</h4>
                      <p>联系人：{{ item?.appUserName }}/{{ item?.contractTelephone }}</p>
                    </div>
                  </div>
                </div>
              </ng-container>
              <p class="time-info">装货时间：{{ i?.loadingTime }}</p>
            </div>
          </div>
          <div nz-col [nzSpan]="12">
            <div class="handling-info p-md">
              <ng-container *ngFor="let item of i?.unLoadingPlaceVOList">
                <div class="flex" *ngIf="item?.type === '2'">
                  <div class="loading-row">
                    <div class="handling-info-icon unloaing-bg">卸</div>
                    <div class="info">
                      <h4>卸货地：{{ item?.province }}{{ item?.city }}{{ item?.area }}{{ item?.detailedAddress }}</h4>
                      <p>联系人：{{ item?.appUserName }}/{{ item?.contractTelephone }}</p>
                    </div>
                  </div>
                </div>
              </ng-container>
              <p class="time-info">卸货时间：{{ i?.unloadingTime }}</p>
            </div>
          </div>
        </div>
      </div>
    </nz-card>

    <nz-card [nzBorderless]="true" class="mb0">
      <div class="font-weight-blod text-md detail-title">
        <a class="sign mr-xs"></a>
        <span>基本信息</span>
      </div>
      <sv-container col="2">
        <!-- <sv-title>货物信息</sv-title> -->
        <ng-container *ngFor="let item of i?.goodsInfoVOList">
          <sv label="货物名称">
            {{ item.goodsTypeName }} - {{ item.goodsName }}
          </sv>
          <sv label="货物数量"> {{ item.weight }}吨,{{ item.volume }}方,{{ item.number }}件 </sv>
          <sv label="承运司机" *ngIf="i?.carrierInformationVO?.driverTelephone !== i?.payeePhone">
            {{i?.carrierInformationVO?.driverName || '--'}} / {{i?.carrierInformationVO?.driverTelephone || '--'}} /
            {{i?.carrierInformationVO?.driverLicensePlate || '--'}}
          </sv>
          <sv label="车型车长载重">
            {{i?.driverCarModelLabel || '--'}} / {{(i?.driverCarLength || '--') +'米'}} / {{(i?.driverCarWeight ||
            '--')+'吨'}}
          </sv>
        </ng-container>
      </sv-container>
      <!-- <sv-container class="mt-md">
        <sv-title>承运信息</sv-title>
        <sv label="司机姓名">
          {{ i?.carrierInformationVO?.driverName }}
        </sv>
        <sv label="手机号">
          {{ i?.carrierInformationVO?.driverTelephone }}
        </sv>
        <sv label="车牌号">
          {{ i?.carrierInformationVO?.driverLicensePlate }}
        </sv>
      </sv-container> -->
    </nz-card>

    <nz-card [nzBorderless]="true" class="mb0">
      <div class="font-weight-blod text-md detail-title">
        <a class="sign"></a>
        <span>服务信息</span>
      </div>
      <sv-container>
        <sv label="服务包">
          {{ i?.insuranceTypeLabel}}
        </sv>
        <sv label="货物价值" *ngIf="i?.insuranceType !== '3'">
          {{i?.goodsValue !==null?(i?.goodsValue|currency)+'元':'-'}}
        </sv>
        <sv label="服务包费用" *ngIf="i?.insuranceType !== '3'">
          {{i?.insurancePremium!==null?(i?.insurancePremium |currency)+'元':'-'}}
        </sv>
      </sv-container>
    </nz-card>
    <nz-card [nzBorderless]="true" class="mb0">
      <div class="font-weight-blod text-md detail-title">
        <a class="sign"></a>
        <span>运费信息</span>
        <span class="pl-sm text-warning">(到货后{{i?.paymentDays}}天内支付运费)</span>
      </div>
      <st [data]="i?.expenseVOList" [columns]="expenseColumns" [page]="{ show: false }">
        <ng-template st-row="total" let-item>
          <div>
            {{ item?.totalAmount | currency }}
            <span>(含附加费）</span>
          </div>
        </ng-template>
        <ng-template st-row="price" let-item>
          <div>
            {{ item?.price | currency }}
          </div>
        </ng-template>
      </st>
      <div class="freight-info-box mt-md" nz-row>
        <div nz-col nzSpan="24">
          <h3 class="mb0">
            <label>总计 :</label>
            <span class="text-error-dark text-xl">
              {{ i?.totalAmount | currency }}
            </span>
            <span>（运费{{ i?.totalFreight | currency }}含附加运费 {{ i?.totalSurcharge | currency }}）</span>
          </h3>
          <div *ngIf='i?.resourceStatus !== "1" && i?.carrierInformationVO?.driverName !== i?.payeeName'>车队长：{{
            i?.payeeName }}/{{ i?.payeePhone }}/{{ i?.payeeCardNo }}</div>
        </div>
      </div>
    </nz-card>
    <nz-card [nzBorderless]="true" class="mb0">
      <div class="font-weight-blod text-md detail-title">
        <a class="sign"></a>
        <span>补充信息</span>
      </div>
      <sv-container>
        <sv label="是否回单">
          {{ i?.supplementaryInformationVO?.stateReceipt ? '是' : '否' }}
        </sv>
        <sv label="回单类型" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
          {{ i?.supplementaryInformationVO?.receiptType === '1' ? '电子回单' : '纸质回单' }}
        </sv>
        <sv label="联系人" *ngIf="i?.supplementaryInformationVO?.stateReceipt"> {{
          i?.supplementaryInformationVO?.receiptUserName || '-' }} / {{ i?.supplementaryInformationVO?.phon || '-' }}
        </sv>
        <sv label="所在地区" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
          {{ i?.supplementaryInformationVO?.area }}
        </sv>
        <sv label="详细地址" *ngIf="i?.supplementaryInformationVO?.stateReceipt">
          {{ i?.supplementaryInformationVO?.address }}
        </sv>
        <sv label="备注">
          {{ i?.supplementaryInformationVO?.remarks }}
        </sv>
      </sv-container>
    </nz-card>
    <nz-card [nzBorderless]="true" class="mb0">
      <div class="font-weight-blod text-md detail-title">
        <a class="sign"></a>
        <span>操作日志</span>
      </div>
      <st #st [data]="service.$api_getOperationLogRecordsList" [columns]="logColumns" [page]="{}"
        [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
        [res]="{ reName: { list: 'data.records', total: 'data.total' } }" [size]="'small'">
        <ng-template st-row="operator" let-item>
          <div>
            {{ item?.operator }} {{ item?.telephone ? '/' + item?.telephone : '' }}
          </div>
        </ng-template>
      </st>
    </nz-card>
  </div>
</nz-spin>
